import { Fragment, useEffect, useState } from "react";
import lessModule from "./index.module.less";

import { Button } from "antd";
import HomePage_HeaderOperationComponentConditionComponent from "../condition";
import HomePage_HeaderOperationComponent_LayoutSettingComponent from "../layoutSetting";
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../common/utils";
import HomePage_DateTimePickerRangeComponent from "../../../dateTimePickerRange";

// 主页-头部操作组件-操作组件
interface homePageHeaderOperationComponentOperationComponentComponentInterface {
  sourceData: object
}

const HomePage_HeaderOperationComponent_OperationComponent: React.FC<homePageHeaderOperationComponentOperationComponentComponentInterface> = (props) => {

  let [isOpenCondition, setIsOpenCondition] = useState<boolean>(false)
  const [btnList, setBtnList] = useState<Array<object>>([])

  const clickData = {
    export: (data: object) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationExport", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请执行头部操作导出" })
      });
    },
    upload: (data: object) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationOpenSelectMonitorModal", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请执行头部操作打开选择监测弹窗，并按需显示", data: { mode: data["mode"], monitoringType: data["monitoringType"], modalName: data["modalName"], selectedList: [], isDateTimePickerRange: true } })
      });
    },
    add: (data: object) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationAdd", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请执行头部操作新增" })
      });
    },
    save: (data: object) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationSave", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请执行头部操作保存" })
      });
    },
    history: (data: object) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationHistory", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请执行头部操作历史数据" })
      });
    },
    search: (value: boolean = true) => {
      setTimeout(() => {
        $eventBus.emit("headerOperationConditionSwitch", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "请按需控制头部操作条件的开关，并判断是否查询", data: { isOpen: value } })
        isOpenCondition = value
        setIsOpenCondition(isOpenCondition)
      });
    }


  }

  const change_rangePicker = (list: Array<string>) => {
    setTimeout(() => {
      $eventBus.emit("headerOperationSearch", { source: "HomePage_HeaderOperationComponentConditionComponent", explain: "日期时间已更新，请执行头部操作日期时间查询", data: { startTime: list[0], endTime: list[1] } })
    });
  }

  const emit_operationParamsData = () => {
    setTimeout(() => {
      props.sourceData?.["initParamsData"] && $eventBus.emit("headerOperationInitParamsData", { source: "HomePage_HeaderOperationComponent_OperationComponent", explain: "头部操作的初始查询参数", data: { initParamsData: { ...props.sourceData?.["initParamsData"] } } })
    });
  }
  
  // 广播函数数据
  const eventBusFuncData = {
    headerOperationConditionSwitch: (data: object) => {
      isOpenCondition = data["data"]["isOpen"]
      setIsOpenCondition(isOpenCondition)
    }
  }


  useEffect(() => {
    emit_operationParamsData()
    setBtnList(props.sourceData?.["btnList"]?.filter((item: object) => item["isPower"]))
  }, [props.sourceData])
  useEffect(() => {
    $EventBus_on(eventBusFuncData)

    return () => {
      $EventBus_off(eventBusFuncData)
    }
  }, [])
  return (
    <div className={lessModule["homePageHeaderOperationComponentOperationComponent"]} style={{ width: isOpenCondition ? "100%" : "fit-content" }}>
      {
        isOpenCondition && <div className={lessModule["homePageHeaderOperationComponentOperationComponent-condition"]}>
          <HomePage_HeaderOperationComponentConditionComponent sourceData={props.sourceData} />
        </div>
      }

      <div className={lessModule["homePageHeaderOperationComponentOperationComponent-operationGroup"]}>
        {
          props.sourceData?.["isDateTimePickerRange"] && <HomePage_DateTimePickerRangeComponent width={330} change_rangePicker={change_rangePicker} />
        }
        {
          props.sourceData?.["isLayoutSetting"] && <div style={{ margin: isOpenCondition ? "0 0 0 16px" : "0 16px 0 0" }}>
            <HomePage_HeaderOperationComponent_LayoutSettingComponent isWarningLineHide={props.sourceData?.["isWarningLineHide"]} layoutItemList={props.sourceData?.["layoutItemList"]} />
          </div>
        }
        {
          isOpenCondition && <div className={lessModule["homePageHeaderOperationComponentOperationComponent-operationGroup__hide"]}>
            <div className={lessModule["operationGroup-hide__divider"]}></div>
            <Button type="default" onClick={() => clickData["search"](false)}>取消</Button>
          </div>
        }
        {/* 条件栏展开与否时的展示按钮和高亮按钮 */}
        {
          isOpenCondition && btnList.filter((item: object) => !["search","add"].includes(item["type"])).map((item: object, idx: number) => (
            <Button key={`btnItem${idx}`}
              type={btnList?.filter((item: object) => !["search","add"].includes(item["type"])).slice(-1)[0]["name"] === item["name"] ? "primary" : "default"}
              onClick={() => clickData[item["type"]](item)}>{item["name"]}</Button>
          ))
        }
        {
          !isOpenCondition && btnList?.map((item: object, idx: number) => (
            <Button key={`btnItem${idx}`}
              type={idx === btnList.length - 1 ? "primary" : "default"}
              onClick={() => clickData[item["type"]](item)}>{item["name"]}</Button>
          ))
        }
      </div>
    </div>
  )
}



export default HomePage_HeaderOperationComponent_OperationComponent